<template>
  <div class="main">
    <div class="team-member"></div>
    <div class="message">
      <div>
        <el-row class="message-content" style="overflow-y: hidden">
          <el-col :span="24">
            <div
              id="dataShow"
              onmouseover="this.style.overflow='scroll'"
              onmouseout="this.style.overflow='scroll'"
              class="dataShow"
            >
              <div
                v-for="(item, index) in radioInfoList"
                :key="index"
                style="background-color: #f5f5f5; padding: 24px"
              >
                <el-row v-if="item.user == 'shangguan'">
                  <el-col :span="21">
                    <span class="aa">
                      {{ item.message }}
                    </span> 
                  </el-col>
                  <el-col :span="3">
                    <span>
                      <svg-icon
                        slot="reference"
                        icon-class="girl"
                        style="font-size: 40px"
                      />
                      <!--对应头像-->
                      {{item.user}}
                    </span>
                  </el-col>
                </el-row>
                <!-- <br /> -->
                <el-row v-if="item.user != 'shangguan'">
                  <el-col :span="1">
                    <span>
                      <svg-icon
                        slot="reference"
                        icon-class="person"
                        style="font-size: 40px"
                      />
                    </span>
                  </el-col>
                  <el-col :span="3">
                    <span>
                      <svg-icon
                        slot="reference"
                        icon-class="girl"
                        style="font-size: 40px"
                      />
                      <!--对应头像-->
                      {{item.user}}
                    </span>
                  </el-col>
                  <el-col :span="21">
                    <span class="bb">
                    {{ item.message }}
                    </span>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="message-send">
        <textarea class="messagge-sent-text"></textarea>
        <el-button
          class="messagge-sent-button"
          type="primary"
          icon="el-icon-send"
          >发送</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radioInfoList: [
        {
          user: "shangguan",
          message: "您好，周先生，我是你的专属客服",
          time2: "2019-11-19 09:06:55",
        },
        {
          user: "周先生",
          message:"123",
          time: "2019-11-19 09:16:55",
        },
        {
          user: "周先生",
          message:"345",
          time: "2019-11-19 09:17:55",
        },
        {
          user: "周先生",
          message:"567",
          time: "2019-11-19 09:19:55",
        },
        {
          user: "shangguan",
          message:"23",
          time: "2019-11-19 09:56:55",
        },
      ],
      visible: false,
    };
  },
  methods: {
    scrollToBottom() {
      this.$nextTick(() => {
        const div = document.getElementById("dataShow");
        div.scrollTop = div.scrollHeight;
      });
    },
  },
};
</script>
<style scoped>
.main {
  background: gray;
  width: 100%;
  height: 100vh;
}
.team-member {
  width: 30%;
  height: 100vh;
  background: rgb(184, 183, 183);
  float: right;
}
.message {
  width: 70%;
  height: 100vh;
  background: rgb(248, 246, 246);
  float: right;
}
.message-content {
  width: 100%;
  height: 60%;
  background: rgb(249, 248, 248);
}
.messagge-sent-button {
  float: right;
  position: relative;
  top: 90px;
  right: 10px;
}
.messagge-sent-text {
  width: 85%;
  height: 100vh;
}
.font {
  font-size: 16px;
  font-weight: bold;
  font-family: "微软雅黑 Light";
}
.dataShow {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 65vh;
  width: 100%;
}
.aa {
  float: right;
  position: relative;
  display: inline-block;
  max-width: calc(40%);
  min-height: 35px;
  line-height: 2.1;
  font-size: 15px;
  padding: 6px 10px;
  text-align: left;
  word-break: break-all;
  background-color: #9eea6a;
  color: #000;
  border-radius: 4px;
  box-shadow: 0px 1px 7px -5px #000;
  border: 0px solid #000;
  margin-top: 0;
  margin-right: 10px;
}
.aa:after {
  content: "";
  border-top: solid 5px #00800000;
  border-left: solid 10px #9eea6a;
  border-right: solid 10px #00800000;
  border-bottom: solid 5px #00800000;
  position: absolute;
  top: 10px;
  left: 100%;
}
.bb {
  display: inline-block;
  line-height: 30px;
  font-style: normal;
  background-color: white;
  letter-spacing: 2px;
  position: relative;
  max-width: calc(40%);
  min-height: 35px;
  line-height: 2.1;
  font-size: 15px;
  padding: 6px 10px;
  text-align: left;
  word-break: break-all;
  border-radius: 4px;
  color: #000;
  box-shadow: 0px 1px 7px -5px #000;
  border: 0px solid #000;
  margin-top: 0;
  margin-left: 10px;
}
.bb:after {
  content: "";
  border-top: solid 5px #00800000;
  border-left: solid 10px #00800000;
  border-right: solid 10px white;
  border-bottom: solid 5px #00800000;
  position: absolute;
  top: 10px;
  right: 100%;
}
</style>